<template>
  <div class="week">
    <div class="three">
      <div class="two" v-for="(v,i) in arr" :key="i">
        <div class="small">
          <img :src="v.img1" class="night">
        </div>
        <div class="small-">
          <p class="p1">{{v.pp1}}</p>

          <p class="p2">
            <b>{{v.pp2}}</b>
            <span>{{v.pp3}}</span>
          </p>
        </div>
      </div>
    </div>
       <div class="three">
      <div class="two" v-for="(v,i) in arr" :key="i">
        <div class="small">
          <img :src="v.img1" class="night">
        </div>
        <div class="small-">
          <p class="p1">{{v.pp1}}</p>

          <p class="p2">
            <b>{{v.pp2}}</b>
            <span>{{v.pp3}}</span>
          </p>
        </div>
      </div>
    </div>
       <div class="three">
      <div class="two" v-for="(v,i) in arr" :key="i">
        <div class="small">
          <img :src="v.img1" class="night">
        </div>
        <div class="small-">
          <p class="p1">{{v.pp1}}</p>

          <p class="p2">
            <b>{{v.pp2}}</b>
            <span>{{v.pp3}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          img1: "/bb/b4.png",
          pp1: "《撒野》你是我的意料之外",
          pp2: "情感故事",
          pp3: "子逸#声夜食堂"
        },
        {
          img1: "/bb/b5.png",
          pp1: "《撒野》你是我的意料之外",
          pp2: "情感故事",
          pp3: "子逸#声夜食堂"
        },
        {
          img1: "/bb/b2.png",
          pp1: "《撒野》你是我的意料之外",
          pp2: "情感故事",
          pp3: "子逸#声夜食堂"
        }
      ]
    };
  }
};
</script>

<style scoped>
.week {
  margin-top: 0.4rem;
  margin-bottom: 0.9rem;
  margin-left: 0.3rem;
  margin-right: 0.25rem;
}
.two {
  display: flex;
  margin-bottom: 0.22rem;
}
.night {
  width: 1.25rem;
  height: 1.25rem;
}
.p1 {
  font-size: 0.32rem;
}
.p2 {
  font-size: 0.22rem;
  color: gray;
}
b {
  border: 1px solid gray;
  border-radius: 0.1rem;
}
.small- {
  margin: auto;
  line-height: 0.5rem;
  margin-left: 0.3rem;
}
.three {
  flex-shrink: 0;
  margin-right: 0.6rem;
}
.week {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
::-webkit-scrollbar {
  display: none;
}
</style>
